import { Text, View, TextInput, TouchableOpacity, StyleSheet, ImageBackground, Animated, Button, Image } from "react-native"
import React, { useState, useEffect } from 'react';
import Sale from "./Sale";
import { useAuth } from "../context/AuthProvider";


const Home = ({ navigation }) => {
    const [isClick, setClick] = useState(true)
    const { user } = useAuth()
    const [text, changeText] = useState("");
    const [refreshing, setRefreshing] = useState(false);
    const [page, setPage] = useState(1);
    const [list, setList] = useState([])

    let flag = true
    useEffect(() => {
        getSale()
    }, [isClick])
    useEffect(()=>{
        getSale()
    },[page])
    useEffect(()=>{
        if(text==''){
            getSale()
        }
    },[text])
    const search = () => {
        flag = false
        fetch('http://10.7.89.174:3000/search',
            {
                method: "POST",
                body: JSON.stringify({
                    text: text,
                    isClick:isClick
                })
            })
            .then(res => res.json())
            .then(res => {
                // console.log(res)
                setList(res.List)
            })
            .finally(() => {
                setTimeout(() => {
                    flag = true
                }, 1000)
            })
        
    }
    const getSale=()=>{
        let baseUrl=isClick?'http://10.7.89.174:3000/fputsale':'http://10.7.89.174:3000/request'
        fetch(baseUrl,
        {
            method: 'POST',
        })
        .then(res => res.json())
        .then(res => {
            // console.log(res);
            // console.log(res.List[7].imgUrl);
            // console.log(1111);
            setRefreshing(false)
            if (res.code == 200) {
                setList(res.List)
            }
            // else {

            //     setList([...list, ...res.List])
            // }
        })
    }


    const onRefresh = () => {
        setRefreshing(true);
        if(page==1){
            getSale()
        }
        else{
            setPage(1);
        }
    }
    return (
        <View style={styles.container}>
            <ImageBackground source={require('../icon/orange.jpg')} style={styles.bgimg}>
                {/* 搜索框 */}
                {/* 搜索内容通过往sale和request传入一个list参数实现，如果list不为空那么就显示下列内容 */}
                <View style={{ paddingRight: 15, paddingLeft: 15, flexGrow: 0, marginTop: '2%' }}>
                    <View style={{ height: 40, backgroundColor: "#fff", borderRadius: 10, paddingLeft: 25, flexDirection: 'row', alignItems: 'center' }} >
                        <TextInput
                            underlineColorAndroid="transparent"
                            placeholder="搜索内容"
                            style={{ marginLeft: 10, width: 350 }}
                            value={text}
                            // 改变搜索框内容
                            // onChangeText={(text) => changeText(text)}
                            onChange={(e) => { changeText(e.nativeEvent.text) }}
                        >
                        </TextInput>
                        <TouchableOpacity>
                            <Text style={{ color: '#0391ff', fontSize: 14 }}
                                onPress={() => { search() }}>搜索</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{ marginTop: "3%", flexGrow: 0 }}>
                    {
                        JSON.stringify(user) == "{}"
                            ? (
                                <>
                                    <View style={{ width: 100, marginLeft: "58%", marginTop: "4%", }}>
                                        <Button title='发布出租' onPress={() => { alert("未登录去登录"); navigation.navigate('Login') }} color='orange'></Button>
                                    </View>
                                    <View style={{ width: 100, marginLeft: "18%", marginTop: "-7%", }}>
                                        <Button title='发布需求' onPress={() => { alert("未登录去登录"); navigation.navigate('Login') }} color='orange'></Button>
                                    </View>
                                </>
                            )
                            : (
                                <>
                                    <View style={{ width: 100, marginLeft: "58%", marginTop: "4%", }}>
                                        <Button title='发布出租' onPress={() => navigation.navigate('发布出租')} color='orange'></Button>
                                    </View>
                                    <View style={{ width: 100, marginLeft: "18%", marginTop: "-7%", }}>
                                        <Button title='发布需求' onPress={() => navigation.navigate('发布需求')} color='orange'></Button>
                                    </View>
                                </>
                            )
                    }
                    <View style={{ flexGrow: 0 }}>
                        <View>
                            <View style={styles.boxchildren}>
                                <Text
                                    onPress={() => setClick(true)}
                                    style={[{ fontSize: 20 }, isClick ? { color: 'orange' } : { color: "black" }]}>
                                    出租物品
                                </Text>
                            </View>
                        </View>
                        <View>
                            <View style={styles.boxchildren1}>
                                <Text
                                    onPress={() => { setClick(false); }}
                                    style={[{ fontSize: 20 }, isClick ? { color: "black" } : { color: 'orange' }]}>
                                    需求列表
                                </Text>
                            </View>
                        </View>
                        <View style={{ marginLeft: "5%" }}>
                            <Sale  >{[navigation, list, isClick,refreshing,page,onRefresh,setPage]}</Sale>
                        </View>
                    </View>
                </View>
            </ImageBackground>
        </View>


    )
}
const styles = StyleSheet.create({
    container: {
        // marginTop: 10,
        flex: 1,
    },
    bgimg: {
        flex: 1,
        resizeMode: "cover",
        // justifyContent: "center"
    },
    request: {
        width: 100,
        height: 100,
        marginTop: 350,
        marginLeft: 100,
        backgroundColor: 'white'
    },
    box: {
        width: 100,
        height: 100,
        marginTop: -100,
        marginLeft: 270,
        backgroundColor: 'white'
    },
    box1: {
        marginTop: -20,
        marginLeft: 25,
    },
    boxchildren: {
        marginLeft: '20%',
        marginTop: '5%'
    },
    boxchildren1: {
        marginLeft: '60%',
        marginTop: '-6%'
    },
    contentStyle: {
        height: '160px',
        color: '#fff',
        background: '#364d79',
    },

});
export default Home